<template>
  <div>
    <el-form ref="pram" :model="pram" :rules="rules" label-width="180px" @submit.native.prevent>
      <el-row>
        <el-col :span="12">
          <el-form-item label="年度" prop="year">
            <el-date-picker
              v-model="pram.year"
              type="year"
              format="yyyy"
              value-format="yyyy"
              placeholder="请选择年度">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地区" prop="area">
            <el-select v-model="pram.area" placeholder="请选择地区">
              <el-option
                v-for="item in areaList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="人才总量（万人）" prop="total">
            <el-input v-model="pram.total" type="number" placeholder="人才总量（万人）" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人才总量(增长率)" prop="total_rate">
            <el-input v-model="pram.total_rate" type="number" placeholder="人才总量(增长率)" clearable />
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="人才发展资金(万元)" prop="money">
            <el-input v-model="pram.money" type="number" placeholder="人才发展专项资金(万元)" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人才发展资金(增长率)" prop="money_rate">
            <el-input v-model="pram.money_rate"  type="number" placeholder="人才发展专项资金(增长率)" clearable />
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="市本级发展资金(万元)" prop="city_money">
            <el-input v-model="pram.city_money"  type="number" placeholder="市本级发展专项资金(万元)" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="市本级发展资金(增长率)" prop="city_money_rate">
            <el-input v-model="pram.city_money_rate" type="number" placeholder="市本级发展专项资金(增长率)" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="党政人才(万人)" prop="party">
            <el-input v-model="pram.party" type="number" placeholder="党政人才(万人)" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="党政人才(增长率)" prop="party_rate">
            <el-input v-model="pram.party_rate"  type="number" placeholder="党政人才(增长率)" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="企业人才(万人)" prop="enterprise">
            <el-input v-model="pram.enterprise"  type="number" placeholder="企业经营管理人才(万人)" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业人才(增长率)" prop="enterprise_rate">
            <el-input v-model="pram.enterprise_rate" type="number" placeholder="企业经营管理人才(增长率)" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="农村实用人才(万人)" prop="rural">
            <el-input v-model="pram.rural" type="number" placeholder="农村实用人才(万人)" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="农村实用人才(增长率)" prop="rural_rate">
            <el-input v-model="pram.rural_rate"  type="number" placeholder="农村实用人才(增长率)" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="社会工作人才(万人)" prop="social_work">
            <el-input v-model="pram.social_work"  type="number" placeholder="社会工作人才(万人)" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="社会工作人才(增长率)" prop="social_work_rate">
            <el-input v-model="pram.social_work_rate" type="number" placeholder="社会工作人才(增长率)" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="专业技术人才(万人)" prop="technology">
            <el-input v-model="pram.technology" type="number" placeholder="专业技术人才(万人)" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专业技术人才(增长率)" prop="technology_rate">
            <el-input v-model="pram.technology_rate"  type="number" placeholder="专业技术人才(增长率)" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="高技能人才(万人)" prop="high_skill">
            <el-input v-model="pram.high_skill"  type="number" placeholder="高技能人才(万人)" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="高技能人才(增长率)" prop="high_skill_rate">
            <el-input v-model="pram.high_skill_rate" type="number" placeholder="高技能人才(增长率)" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="人才占比(%)" prop="talent_proportion">
            <el-input v-model="pram.talent_proportion"  type="number" placeholder="各类人才占人口比例(%)" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <el-switch v-model="pram.status" :active-value="1" :inactive-value="0" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="handlerSubmit('pram')">{{ isCreate===0?'确定':'更新' }}</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {Debounce} from '@/utils/validate'
import {getEditData} from "@/utils/utils";
import {saveIndicators} from "@/api/indicators";

export default {
  // name: "edit"
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return { rules: [] }
      }
    },
    area: {
      type: Array
    }
  },
  data() {
    const validator=(rule, value, callback) => {
      if(!value&&value!=0){
        callback(new Error('请填写数值'));
        return;
      }else{
        if(value.toString().indexOf('.')!==-1){//浮点数
          if(value.toString().length>=14){
            callback(new Error('小数的整数部分最大长度为14'))
            return;
          }
          if(value.toString().split('.')[1].length>4){
            callback(new Error('小数部分最大长度为4'))
            return;
          }
        }else{//整数
          if(value.toString().length>=10){
            callback(new Error('整数最大长度为9'))
            return;
          }
        }
      }
      callback()
    }
    return {
      constants:this.$constants,
      pram: {
        year: '',
        area: null,

        total:0,
        total_rate:0,

        talent_proportion:0,

        money:0,
        money_rate:0,

        city_money:0,
        city_money_rate:0,

        party:0,
        party_rate:0,

        enterprise:0,
        enterprise_rate:0,

        technology:0,
        technology_rate:0,

        high_skill:0,
        high_skill_rate:0,

        rural:0,
        rural_rate:0,

        social_work:0,
        social_work_rate:0,

        status: 1,
        id: 0,
      },
      areaList:[],
      rules: {
        /*year: [{ required: true, message: '请选择年度', trigger: ['blur', 'change'] }],
        area: [{ required: true, message: '请选择地区', trigger: ['blur', 'change'] }],

        total: [{ required: true, trigger: ['blur', 'change'],validator }],
        total_rate: [{ required: true, trigger: ['blur', 'change'],validator }],

        money: [{ required: true, trigger: ['blur', 'change'],validator }],
        money_rate: [{ required: true, trigger: ['blur', 'change'],validator }],

        city_money: [{ required: true, trigger: ['blur', 'change'],validator }],
        city_money_rate: [{ required: true, trigger: ['blur', 'change'],validator }],

        party: [{ required: true,trigger: ['blur', 'change'],validator }],
        party_rate: [{ required: true, trigger: ['blur', 'change'],validator }],

        enterprise: [{ required: true, trigger: ['blur', 'change'],validator }],
        enterprise_rate: [{ required: true,trigger: ['blur', 'change'],validator }],

        rural: [{ required: true,trigger: ['blur', 'change'],validator }],
        rural_rate: [{ required: true,trigger: ['blur', 'change'],validator }],

        social_work: [{ required: true,trigger: ['blur', 'change'],validator }],
        social_work_rate: [{ required: true, trigger: ['blur', 'change'],validator }],

        technology: [{ required: true,trigger: ['blur', 'change'],validator }],
        technology_rate: [{ required: true, trigger: ['blur', 'change'],validator }],

        high_skill: [{ required: true, trigger: ['blur', 'change'],validator }],
        high_skill_rate: [{ required: true, trigger: ['blur', 'change'],validator }],

        talent_proportion: [{ required: true, trigger: ['blur', 'change'],validator }],*/
      },
    }
  },
  mounted() {
    this.initEditData()
  },
  watch:{
    area:{
      immediate:true,
      handler(v){
        this.areaList=v;
      }
    }
  },
  methods: {
    close() {
      this.$emit('hideEditDialog')
    },
    initEditData() {
      if (this.isCreate !== 1) return //编辑
      this.pram=
      {
        ...getEditData(Object.keys(this.pram), this.editData)
      };
    },
    handlerSubmit:Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid) return
        saveIndicators(this.pram).then(data => {
          this.$message.success('保存成功')
          this.$emit('hideEditDialog')
        })
      })
    }),
  }
}
</script>

<style scoped>

</style>
